<template>
  <view class="trasac-content">
    <view class="filter-box">
      <view class="date-time-box">
        <uni-datetime-picker type="daterange" ref="datePickerRefs" returnType="timestamp"
          v-model="queryParam.createTimes" @change="timeChange" />
      </view>
      <view class="split-line"></view>
      <view class="type-select-box">
        <picker mode="selector" :range-key="'label'" :range="tradeTypeList" :value="queryParam.topUpAndDeductType"
          @change="selectChange">
          <view v-if="queryParam.topUpAndDeductType" class="uni-input">{{
            queryParam.topUpAndDeductType
            }}</view>
          <view v-else class="placeholder">选择交易类型</view>
        </picker>
        <uni-icons v-if="queryParam.topUpAndDeductType" class="clear-icon" @click.native="clearSelectValue" type="clear"
          color="#c0c4cc" size="22">
        </uni-icons>
      </view>
    </view>
    <view class="content-box">
      <view class="ovewview">
        <view>
          <view class="label">充值</view>
          <view class="value"><text>{{overview.rechargeAmountTotal}}</text>元</view>
        </view>
        <view>
          <view class="label">扣款</view>
          <view class="value"><text>{{overview.deductionAmountTotal}}</text>元</view>
        </view>
      </view>
      <view class="records-box-wrap" :key="index" v-for="(item,index) in list" @click="toDetail(item)">
        <view>
          <view class="icon-text" :class="{
              'outer-bg-blue': item.topUpAndDeductType===0,
              'outer-bg-yellow': item.topUpAndDeductType===1
            }">
            <view :class="{
                'inner-bg-blue': item.topUpAndDeductType===0,
                'inner-bg-yellow': item.topUpAndDeductType===1
              }">
              {{ typeMap[item.topUpAndDeductType] }}
            </view>
          </view>
        </view>
        <view style="flex: 1">
          <view class="title-sub">
            <view class="name">{{ item.customerName }}</view>
            <view class="amount-text">{{amountSymbol(item.topUpAndDeductType)}}{{ item.amount }}</view>
          </view>
          <view class="title-sub">
            <view class="weak-text">{{ accountTypeText(item.accountType) }}</view>
            <view class="weak-text">{{ item.tradingTime }}</view>
          </view>
        </view>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
  import { toast } from '@/utils/common';
  import { getDictDatas } from '@/api/me.js';
  import { timestampToChineseDate } from '@/utils/common.js';
  import { getTenantId } from '@/utils/auth';
  import { getTransactionRecord, getTransactionRecordTotal } from "@/api/customerAccount"
  import { getBasisDeploy } from "@/api/system/user.js"
  export default {
    data() {
      return {
        oneYearAccShow: false,
        isMore: 'more',
        list: [],
        datetimerange: [],
        status: null,
        tradeTypeList: [],
        accountTypeList: [],
        statusName: '请选择交易类型',
        typeMap: {
          0: '充',
          1: '扣'
        },
        overview: {},
        queryParam: {
          current: 1,
          pageSize: 20,
          customerId: '',
          cashBalanceId: '',
          acceptanceBalanceId: '',
          topUpAndDeductType: '',
          oneYearAcceptanceAccountId: undefined,
          createTimes: []
        }
      };
    },
    computed: {
      accountTypeText() {
        return (value) => {
          const accountType = this.accountTypeList.find(e => e.value == value)
          return accountType?.label
        }
      },
      amountSymbol() {
        return (value) => {
          if (value === 0) {
            return '+'
          }
          if (value === 1) {
            return '-'
          }
          return ''
        }
      }
    },
    async onLoad(option) {
      let res = await getBasisDeploy(getTenantId())
      if (res.code == 200) {
        this.oneYearAccShow = res?.data?.deductionSequence == 20 ? true : false
      }
      this.queryParam.customerId = option.customerId
      this.queryParam.cashBalanceId = option.cashBalanceId
      this.queryParam.acceptanceBalanceId = option.acceptanceBalanceId
      this.queryParam.oneYearAcceptanceAccountId = option.oneYearAccId
      this.list = [];
      this.getDictDatas();
      this.getTransactionRecordTotal()
      this.getList();
    },
    async onShow() {
      let res = await getBasisDeploy(getTenantId())
      if (res.code == 200) {
        this.oneYearAccShow = res?.data?.deductionSequence == 20 ? true : false
      }
    },
    onPullDownRefresh() {
      this.queryParam.current = 1;
      this.isMore = 'more';
      this.list = [];
      this.getList();
    },
    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.current++;
        this.getList();
      }
    },
    methods: {
      timeChange(timeRange) {
        this.queryParam.createTimes = timeRange;
        this.list = [];
        this.isMore = 'more';
        this.queryParam.current = 1;
        this.getTransactionRecordTotal()
        this.getList();
      },
      selectChange(value) {
        this.list = [];
        this.isMore = 'more';
        this.queryParam.current = 1;
        const index = value.detail.value;
        this.queryParam.topUpAndDeductType = this.tradeTypeList[index]?.label;
        this.getTransactionRecordTotal()
        this.getList();
      },
      clearSelectValue() {
        this.list = [];
        this.queryParam.current = 1;
        this.queryParam.topUpAndDeductType = '';
        this.getTransactionRecordTotal()
        this.getList();
      },
      async getDictDatas() {
        const res = await getDictDatas();
        if (res.code === 0) {
          this.tradeTypeList = res?.data?.filter(
            (e) => e.dictType === 'top_up_and_deduct'
          );
          this.accountTypeList = res?.data?.filter(
            (e) => e.dictType === 'account_type'
          );
        }
      },
      getBody() {
        const data = JSON.parse(JSON.stringify(this.queryParam));
        if (data.topUpAndDeductType) {
          data.topUpAndDeductType = this.tradeTypeList.find(
            (e) => e.label === data.topUpAndDeductType.toString()
          ).value;
        }
        if (data.createTimes.length === 2) {
          data.startTime = `${timestampToChineseDate(
            data.createTimes[0]
          )} 00:00:00`;
          data.endTime = `${timestampToChineseDate(
            data.createTimes[1]
          )} 23:59:59`;
        }
        if (!data.topUpAndDeductType) {
          delete data.topUpAndDeductType
        }
        delete data.createTimes
        if (!this.oneYearAccShow) {
          data['oneYearAcceptanceAccountId'] = null
        }
        return data
      },
      async getTransactionRecordTotal() {
        const data = this.getBody()
        delete data.current
        delete data.pageSize
        const res = await getTransactionRecordTotal(data);
        if (res.code === '200') {
          this.overview = res.data || {}
        } else {
          toast(res.msg)
        }
      },
      async getList() {
        try {
          const res = await getTransactionRecord(this.getBody());
          if (res.code === '200') {
            const result = res?.data?.rows || [];
            const total = res?.data?.total || 0;
            this.list = [...this.list, ...result];
            this.setIsMore(total)
          } else {
            toast(res.msg)
          }
        } finally {
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }
      },
      setIsMore(total) {
        if (total == this.list.length) {
          this.isMore = 'noMore';
        } else {
          this.isMore = 'more';
        }
      },
      toDetail(item) {
        this.$tab.navigateTo(
          `/packageA/pages/customerAccount/tradeDetail?accountType=${item.accountType}&customerName=${item.customerName}&transactionRecordId=${item.transactionRecordId}`
        );
      }
    }
  };
</script>

<style lang="scss" scoped>
  .outer-bg-red {
    background-color: #ffa59c;
  }

  .inner-bg-red {
    background-color: #d32d2d;
  }

  .outer-bg-blue {
    background-color: #c5e2ff;
  }

  .inner-bg-blue {
    background-color: #49a4ff;
  }

  .outer-bg-yellow {
    background-color: #ffe8aa;
  }

  .inner-bg-yellow {
    background-color: #ffd155;
  }

  .content-box {
    margin: 17.78rpx;

    .ovewview {
      display: flex;
      justify-content: space-between;


      >view {
        width: 50%;
        height: 70px;
        padding: 12px 0;
        border-radius: 4px;
        background: linear-gradient(180deg, #dceeff, #ffffff 100%);

        .label {
          text-align: center;
          font-size: 15px;
          color: #333333;
          padding-bottom: 6px;
        }

        .value {
          text-align: center;
          font-size: 14px;
          color: #666666;
        }

        text {
          color: #F78600;
          font-size: 20px;
          font-weight: 600;
        }
      }

      >view+view {
        margin-left: 10px;
      }
    }

    .icon-text {
      width: 78.22rpx;
      height: 78.22rpx;
      padding: 8rpx;
      color: #ffffff;
      border: 3.56rpx solid;
      border-radius: 60.44rpx;
      margin-right: 17.78rpx;

      >view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 32rpx;
        border-radius: 50%;
      }
    }

    .records-box-wrap {
      display: flex;
      padding: 26.67rpx;
      margin-top: 10px;
      background-color: #ffffff;

      >view:first-child {
        display: flex;
        align-items: center;
      }

      .name {
        font-size: 32rpx;
        font-weight: 600;
      }

      .title-sub {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .amount-text {
        text-align: end;
        font-size: 35.56rpx;
        font-weight: 600;
      }

      .weak-text {
        line-height: 24px;
        color: #999999;
      }
    }

    .records-box-wrap+.records-box-wrap {
      margin-top: 17.78rpx;
    }
  }

  .filter-box {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #ffffff;

    >.date-time-box {
      flex: 4;
    }

    >.type-select-box {
      flex: 2;
      padding: 0 24px 0 10px;
    }
  }

  .split-line {
    height: 20px;
    border-left: 1px solid #d9d9d9;
  }

  .clear-icon {
    position: absolute;
    right: 4px;
    top: 9px;
  }

  .placeholder {
    color: #666666;
  }

  ::v-deep .date-time-box .uni-date-x--border,
  ::v-deep .date-time-box .uni-date-x {
    border-radius: 0 !important;
    border: 0 !important;
  }
</style>